<!DOCTYPE html>
<html lang="zh_cn">
  <head>
    
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">



  <meta name="description" content="hexo-asset-image图片显示问题处理方式"/>




  <meta name="keywords" content="hexo-asset-image插件, 阿辉的博客" />










  <link rel="alternate" href="/blog/default" title="阿辉的博客">




  <link rel="shortcut icon" type="image/x-icon" href="/blog/favicon.ico?v=2.9.0" />



<link rel="canonical" href="http://goodbox.gitee.io/blog/2020/03/23/hexo-asset-image/"/>



  <link rel="stylesheet" type="text/css" href="/blog/lib/fancybox/jquery.fancybox.css" />




  <link rel="stylesheet" type="text/css" href="/blog/lib/nprogress/nprogress.min.css" />



<link rel="stylesheet" type="text/css" href="/blog/css/style.css?v=2.9.0" />



  



  <script id="baidu_push">
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>








<script>
  window.config = {"title":"阿辉的博客","subtitle":"","description":"","author":"阿辉","language":"zh_cn","timezone":"","url":"http://goodbox.gitee.io/blog","root":"/blog/","permalink":":year/:month/:day/:title/","permalink_defaults":null,"pretty_urls":{"trailing_index":true,"trailing_html":true},"source_dir":"source","public_dir":"public","tag_dir":"tags","archive_dir":"archives","category_dir":"categories","code_dir":"downloads/code","i18n_dir":":lang","skip_render":null,"new_post_name":":title.md","default_layout":"post","titlecase":false,"external_link":{"enable":true,"field":"site","exclude":""},"filename_case":0,"render_drafts":false,"post_asset_folder":true,"relative_link":false,"future":true,"highlight":{"enable":true,"auto_detect":false,"line_number":true,"tab_replace":"","wrap":true,"hljs":false,"first_line_number":"always1"},"default_category":"uncategorized","category_map":null,"tag_map":null,"date_format":"YYYY-MM-DD","time_format":"HH:mm:ss","use_date_for_updated":false,"per_page":10,"pagination_dir":"page","theme":"even","server":{"port":4000,"log":false,"compress":false,"header":true,"cache":false},"deploy":{"type":"git","repo":"https://gitee.com/goodbox/blog.git","branch":"master"},"ignore":null,"meta_generator":true,"keywords":null,"index_generator":{"per_page":10,"order_by":"-date","path":""},"include":null,"exclude":null,"menu":{"Home":"/","Archives":"/archives/","Categories":"/categories/","Tags":"/tags","About":"/about"},"leancloud":{"baidu_analytics":"9b96b92118600aa5dae45039cebb80de","app_id":null,"app_key":null},"social":{"email":"your@email.com","stack-overflow":null,"twitter":null,"facebook":null,"linkedin":null,"google":null,"github":"https://github.com/ahonn","weibo":null,"zhihu":null,"douban":null,"pocket":null,"tumblr":null,"instagram":null},"copyright":{"enable":true,"license":"<a rel=\"license\" href=\"http://creativecommons.org/licenses/by-nc/4.0/\" target=\"_blank\">知识共享署名-非商业性使用 4.0 国际许可协议</a>"},"archive_generator":{"per_page":10,"yearly":true,"monthly":true,"daily":false},"category_generator":{"per_page":10},"tag_generator":{"per_page":10},"marked":{"gfm":true,"pedantic":false,"breaks":true,"smartLists":true,"smartypants":true,"modifyAnchors":"","autolink":true,"sanitizeUrl":false,"headerIds":true},"since":2015,"favicon":"/favicon.ico","rss":"default","color":"Default","toc":true,"fancybox":true,"pjax":true,"reward":{"enable":false,"qrCode":{"wechat":null,"alipay":null}},"baidu_analytics":null,"baidu_verification":null,"google_analytics":null,"google_verification":null,"disqus_shortname":null,"changyan":{"appid":null,"appkey":null},"livere_datauid":null,"version":"2.9.0"};
</script>

    <title> hexo-asset-image图片显示问题处理方式 - 阿辉的博客 </title>
  <meta name="generator" content="Hexo 4.2.0"></head>

  <body><div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/blog/." class="logo">阿辉的博客</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    
      <a href="/blog/">
        <li class="mobile-menu-item">
          
          
            首页
          
        </li>
      </a>
    
      <a href="/blog/archives/">
        <li class="mobile-menu-item">
          
          
            归档
          
        </li>
      </a>
    
      <a href="/blog/categories/">
        <li class="mobile-menu-item">
          
          
            分类
          
        </li>
      </a>
    
      <a href="/blog/tags">
        <li class="mobile-menu-item">
          
          
            标签
          
        </li>
      </a>
    
      <a href="/blog/about">
        <li class="mobile-menu-item">
          
          
            关于
          
        </li>
      </a>
    
  </ul>
</nav>

    <div class="container" id="mobile-panel">
      <header id="header" class="header"><div class="logo-wrapper">
  <a href="/blog/." class="logo">阿辉的博客</a>
</div>

<nav class="site-navbar">
  
    <ul id="menu" class="menu">
      
        <li class="menu-item">
          <a class="menu-item-link" href="/blog/">
            
            
              首页
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/blog/archives/">
            
            
              归档
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/blog/categories/">
            
            
              分类
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/blog/tags">
            
            
              标签
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/blog/about">
            
            
              关于
            
          </a>
        </li>
      
    </ul>
  
</nav>

      </header>

      <main id="main" class="main">
        <div class="content-wrapper">
          <div id="content" class="content">
            
  
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">
        
          hexo-asset-image图片显示问题处理方式
        
      </h1>

      <div class="post-meta">
        <span class="post-time">
          2020-03-23
        </span>
        
        
      </div>
    </header>

    
    


    <div class="post-content">
      
        <p>hexo-asset-image图片不显示问题,和编译后自动加了个.io导致图片显示不正常<br>解决办法如下:</p>
<p>一、插件安装与配置<br>首先我们需要安装一个图片路径转换的插件，这个插件名字是hexo-asset-image</p>
<a id="more"></a>
<p>npm install <a href="https://github.com/CodeFalling/hexo-asset-image" target="_blank" rel="noopener">https://github.com/CodeFalling/hexo-asset-image</a> –save</p>
<p>但是这个插件的内容需要修改【不然可能会出Bug】</p>
<p>打开/node_modules/hexo-asset-image/index.js，将内容更换为下面的代码</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line">&#39;use strict&#39;;</span><br><span class="line">var cheerio &#x3D; require(&#39;cheerio&#39;);</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; http:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;14480345&#x2F;how-to-get-the-nth-occurrence-in-a-string</span><br><span class="line">function getPosition(str, m, i) &#123;</span><br><span class="line">  return str.split(m, i).join(m).length;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var version &#x3D; String(hexo.version).split(&#39;.&#39;);</span><br><span class="line">hexo.extend.filter.register(&#39;after_post_render&#39;, function(data)&#123;</span><br><span class="line">  var config &#x3D; hexo.config;</span><br><span class="line">  if(config.post_asset_folder)&#123;</span><br><span class="line">    	var link &#x3D; data.permalink;</span><br><span class="line">	if(version.length &gt; 0 &amp;&amp; Number(version[0]) &#x3D;&#x3D; 3)</span><br><span class="line">	   var beginPos &#x3D; getPosition(link, &#39;&#x2F;&#39;, 1) + 1;</span><br><span class="line">	else</span><br><span class="line">	   var beginPos &#x3D; getPosition(link, &#39;&#x2F;&#39;, 3) + 1;</span><br><span class="line">	&#x2F;&#x2F; In hexo 3.1.1, the permalink of &quot;about&quot; page is like &quot;...&#x2F;about&#x2F;index.html&quot;.</span><br><span class="line">	var endPos &#x3D; link.lastIndexOf(&#39;&#x2F;&#39;) + 1;</span><br><span class="line">    link &#x3D; link.substring(beginPos, endPos);</span><br><span class="line"></span><br><span class="line">    var toprocess &#x3D; [&#39;excerpt&#39;, &#39;more&#39;, &#39;content&#39;];</span><br><span class="line">    for(var i &#x3D; 0; i &lt; toprocess.length; i++)&#123;</span><br><span class="line">      var key &#x3D; toprocess[i];</span><br><span class="line"> </span><br><span class="line">      var $ &#x3D; cheerio.load(data[key], &#123;</span><br><span class="line">        ignoreWhitespace: false,</span><br><span class="line">        xmlMode: false,</span><br><span class="line">        lowerCaseTags: false,</span><br><span class="line">        decodeEntities: false</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line">      $(&#39;img&#39;).each(function()&#123;</span><br><span class="line">		if ($(this).attr(&#39;src&#39;))&#123;</span><br><span class="line">			&#x2F;&#x2F; For windows style path, we replace &#39;\&#39; to &#39;&#x2F;&#39;.</span><br><span class="line">			var src &#x3D; $(this).attr(&#39;src&#39;).replace(&#39;\\&#39;, &#39;&#x2F;&#39;);</span><br><span class="line">			if(!&#x2F;http[s]*.*|\&#x2F;\&#x2F;.*&#x2F;.test(src) &amp;&amp;</span><br><span class="line">			   !&#x2F;^\s*\&#x2F;&#x2F;.test(src)) &#123;</span><br><span class="line">			  &#x2F;&#x2F; For &quot;about&quot; page, the first part of &quot;src&quot; can&#39;t be removed.</span><br><span class="line">			  &#x2F;&#x2F; In addition, to support multi-level local directory.</span><br><span class="line">			  var linkArray &#x3D; link.split(&#39;&#x2F;&#39;).filter(function(elem)&#123;</span><br><span class="line">				return elem !&#x3D; &#39;&#39;;</span><br><span class="line">			  &#125;);</span><br><span class="line">			  var srcArray &#x3D; src.split(&#39;&#x2F;&#39;).filter(function(elem)&#123;</span><br><span class="line">				return elem !&#x3D; &#39;&#39; &amp;&amp; elem !&#x3D; &#39;.&#39;;</span><br><span class="line">			  &#125;);</span><br><span class="line">			  if(srcArray.length &gt; 1)</span><br><span class="line">				srcArray.shift();</span><br><span class="line">			  src &#x3D; srcArray.join(&#39;&#x2F;&#39;);</span><br><span class="line">			  $(this).attr(&#39;src&#39;, config.root + link + src);</span><br><span class="line">			  console.info&amp;&amp;console.info(&quot;update link as:--&gt;&quot;+config.root + link + src);</span><br><span class="line">			&#125;</span><br><span class="line">		&#125;else&#123;</span><br><span class="line">			console.info&amp;&amp;console.info(&quot;no src attr, skipped...&quot;);</span><br><span class="line">			console.info&amp;&amp;console.info($(this));</span><br><span class="line">		&#125;</span><br><span class="line">      &#125;);</span><br><span class="line">      data[key] &#x3D; $.html();</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>打开_config.yml文件，修改下述内容</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">post_asset_folder: true</span><br></pre></td></tr></table></figure>
<p>比如说：当你打开文章资源文件夹功能后，你把一个 example.jpg 图片放在了你的资源文件夹中，如果通过使用相对路径的常规 markdown 语法 <img src="/example.jpg" alt> ，它将 不会 出现在首页上。（但是它会在文章中按你期待的方式工作）</p>
<p>正确的引用图片方式是使用下列的标签插件而不是 markdown ：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;% asset_img 我是一张图片名.jpg 这是图片的描述 %&#125;</span><br></pre></td></tr></table></figure>
      
    </div>

    
      
      

  <div class="post-copyright">
    <p class="copyright-item">
      <span>原文作者: </span>
      <a href="http://goodbox.gitee.io/blog">阿辉</a>
    </p>
    <p class="copyright-item">
      <span>原文链接: </span>
      <a href="http://goodbox.gitee.io/blog/2020/03/23/hexo-asset-image/">http://goodbox.gitee.io/blog/2020/03/23/hexo-asset-image/</a>
    </p>
    <p class="copyright-item">
      <span>许可协议: </span>
      
      <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank">知识共享署名-非商业性使用 4.0 国际许可协议</a>
    </p>
  </div>



      
      
    

    
      <footer class="post-footer">
        
          <div class="post-tags">
            
              <a href="/blog/tags/hexo-asset-image%E6%8F%92%E4%BB%B6/">hexo-asset-image插件</a>
            
          </div>
        
        
        
  <nav class="post-nav">
    
      <a class="prev" href="/blog/2020/03/24/epidemicQuery/">
        <i class="iconfont icon-left"></i>
        <span class="prev-text nav-default">中国联通、电信、移动手机卡查询个人轨迹行程查询疫情期间行程查询 - 扫一扫，查询最近14日内经过的地方</span>
        <span class="prev-text nav-mobile">上一篇</span>
      </a>
    
    
      <a class="next" href="/blog/2020/03/23/gongzhonghao/">
        <span class="next-text nav-default">欢迎关注阿辉的公众号! 谢谢</span>
        <span class="prev-text nav-mobile">下一篇</span>
        <i class="iconfont icon-right"></i>
      </a>
    
  </nav>

      </footer>
    

  </article>


          </div>
          
  <div class="comments" id="comments">
    
  </div>


        </div>
      </main>

      <footer id="footer" class="footer">

  <div class="social-links">
    
      
        
          <a href="mailto:your@email.com" class="iconfont icon-email" title="email"></a>
        
      
    
      
    
      
    
      
    
      
    
      
    
      
        
          <a href="https://github.com/ahonn" target="_blank" rel="noopener" class="iconfont icon-github" title="github"></a>
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
      
      <a href="/blog/atom.xml" class="iconfont icon-rss" title="rss"></a>
    
  </div>


<div class="copyright">
  <span class="power-by">
    由 <a class="hexo-link" href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> 强力驱动
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    主题 - 
    <a class="theme-link" href="https://github.com/ahonn/hexo-theme-even" target="_blank" rel="noopener">Even</a>
  </span>

  <span class="copyright-year">
    
    &copy; 
     
      2015 - 
    
    2020

    <span class="heart">
      <i class="iconfont icon-heart"></i>
    </span>
    <span class="author">阿辉</span>
  </span>
</div>

      </footer>

      <div class="back-to-top" id="back-to-top">
        <i class="iconfont icon-up"></i>
      </div>
    </div>

    
  
  

  



    
  



  
  





  
    <script type="text/javascript" src="/blog/lib/jquery/jquery.min.js"></script>
  

  
    <script type="text/javascript" src="/blog/lib/slideout/slideout.js"></script>
  

  
    <script type="text/javascript" src="/blog/lib/fancybox/jquery.fancybox.pack.js"></script>
  

  
    <script type="text/javascript" src="/blog/lib/pjax/jquery.pjax.min.js"></script>
  

  
    <script type="text/javascript" src="/blog/lib/nprogress/nprogress.min.js"></script>
  


    <script type="text/javascript" src="/blog/js/src/even.js?v=2.9.0"></script>

  </body>
</html>
